<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div class="fixed bottom-6 right-6 flex flex-col gap-2 z-10">
    <!-- 黑暗模式切换按钮 -->
    <label class="swap swap-rotate">
        <input type="checkbox" class="theme-controller" value="dark"/>
        <svg class="swap-off h-10 w-10 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <!-- Sun icon paths here -->
            <path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"></path>
        </svg>
        <svg class="swap-on h-10 w-10 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <!-- Moon icon paths here -->
            <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"></path>
        </svg>
    </label>

    <!-- 回主页按钮 -->
    <a href="<c:url value="/"/>" class="btn btn-circle hover:bg-error transition duration-300">
        <svg xmlns="http://www.w3.org/2000/svg"
             fill="none"
             width="32"
             height="32"
             class="swap-off fill-current"
             viewBox="0 0 24 24"
             stroke="currentColor">
            <path stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
        </svg>
    </a>

    <!-- 回到顶部按钮 -->
    <button onclick="scrollToTop()" class="btn btn-circle hover:bg-error transition duration-300 hidden" id="backToTopButton">
        <svg t="1734969926999"
             class="swap-off fill-current"
             xmlns="http://www.w3.org/2000/svg"
             width="32"
             height="32"
             viewBox="0 0 1024 1024"
             xmlns="http://www.w3.org/2000/svg"
             p-id="1614">
            <path d="M511.58528 470.08768v0.04608zM909.69088 609.0752c0-105.49248-41.16992-204.57472-113.34144-278.59456-8.61184-8.81152-24.4224-14.14656-33.2288-5.53984-8.81664 8.6016-7.42912 21.61152 1.17248 30.42304 64.11264 65.75616 104.82176 149.05856 104.82176 251.78112s-40.16128 185.93792-104.82176 251.78112c-8.64768 8.81152-9.40032 22.53312-0.62464 31.1808 8.76544 8.64256 23.03488 7.3472 31.68256-1.41824 72.8064-74.11712 114.29888-173.60896 114.29888-279.60832h0.04096zM230.26176 324.85376C155.68896 399.21664 111.58528 501.6064 111.58528 609.03424c0 109.23008 44.14976 211.49696 120.89856 286.15168a22.28736 22.28736 0 0 0 31.55968-0.46592 22.28736 22.28736 0 0 0-0.4608-31.55456c-68.18816-66.304-107.38688-157.07136-107.38688-254.1312 0-95.46752 37.93408-187.6224 104.15104-253.71648 8.73472-8.68352 8.68864-21.77536 0-30.50496-13.3376-13.3888-30.12608 0-30.12608 0l0.04096 0.04096zM512.42496 242.89792c-36.0192 0-65.2544 29.2352-65.2544 65.2544s29.2352 65.2544 65.2544 65.2544 65.2544-29.2352 65.2544-65.2544-29.2352-65.2544-65.2544-65.2544z m0 99.79392c-19.04128 0-34.5344-15.49312-34.5344-34.5344s15.49312-34.5344 34.5344-34.5344c19.0464 0 34.5344 15.49312 34.5344 34.5344s-15.488 34.5344-34.5344 34.5344zM497.68448 743.74144h26.86976c4.56704-43.93984 7.84384-88.08448 9.35936-118.30272 6.83008-135.46496-19.3792-138.96704-23.01952-138.76736-3.67104-0.2048-29.88544 3.1488-22.8096 138.69056 1.58208 30.22848 4.94592 74.40896 9.6 118.37952zM478.72 892.96896a17.06496 17.06496 0 1 1-34.12992 0v-119.41888a17.06496 17.06496 0 1 1 34.12992 0v119.41888zM528.02048 956.58496a17.06496 17.06496 0 1 1-34.12992 0v-183.03488a17.06496 17.06496 0 0 1 34.12992 0v183.03488zM581.94432 849.07008a17.06496 17.06496 0 1 1-34.12992 0v-75.52a17.06496 17.06496 0 1 1 34.12992 0v75.52zM511.54432 439.46496v0.26624-0.26624z"
                  p-id="1615"></path>
            <path d="M670.848 417.10592c2.49344-3.15904 50.11456-198.07744-158.55104-392.20736v0.08192C303.78496 218.88 353.80224 414.65856 353.80224 414.65856c-163.9936 158.40768-45.952 329.04192-45.952 329.04192 28.83072-104.6272 95.46752-136.55552 95.46752-136.55552 12.42112 48.08704 60.09344 136.50432 60.09344 136.50432l30.12608 0.0512c-11.12064-45.99808-17.96096-159.88736-17.96096-159.88736-6.29248-105.53856 36.00384-113.72544 36.00384-113.72544l-0.00512-2.72384v2.67776s42.3424 8.31488 36.25984 113.80736c0 0-6.58944 113.8944-17.59232 159.8464l30.13632 0.04096s44.94336-88.58624 57.1904-136.64256c0 0 73.14944 32.2304 102.02112 131.13856 0.01024 0.01024 112.7936-170.47552-48.7424-321.1264z m44.3392 211.76832c-0.3584 2.74432-0.76288 5.44768-1.20832 8.10496-36.59264-47.75936-77.37344-66.25792-79.88224-67.36384l-44.26752-19.50208-0.65536 2.5856c-3.80416-104.20224-57.9328-120.53504-69.69856-122.84416l-15.67744 0.02048c-12.1344 2.34496-69.248 19.46112-69.79584 132.29568l-3.48672-13.48608-44.9024 21.51424c-2.31424 1.11104-40.15616 19.79392-74.66496 69.65248-9.14432-53.08928-1.39776-125.50656 71.30624-195.7376l17.12128-16.5376-5.89312-23.06048c-1.5616-6.49216-35.85536-158.58688 118.85056-321.9712 140.93824 148.79744 125.85472 287.69792 120.87296 316.1344l-17.88416 22.65088 27.59168 25.728c56.77056 52.95104 81.08544 114.11968 72.27392 181.81632z"
                  p-id="1616"></path>
        </svg>

    </button>
</div>

<script>
    function scrollToTop() {
        window.scrollTo({top: 0, behavior: 'smooth'});
    }

    window.addEventListener('scroll', () => {
        const backToTopButton = document.getElementById('backToTopButton');
        if (window.scrollY > 100) {
            backToTopButton.classList.remove('hidden');
        } else {
            backToTopButton.classList.add('hidden');
        }
    });

    document.addEventListener('DOMContentLoaded', function () {
        const themeController = document.querySelector('.theme-controller');
        const currentTheme = localStorage.getItem('theme') || 'light';
        document.documentElement.setAttribute('data-theme', currentTheme);
        themeController.checked = currentTheme === 'dark';

        themeController.addEventListener('change', function () {
            const newTheme = this.checked ? 'dark' : 'light';
            document.documentElement.setAttribute('data-theme', newTheme);
            localStorage.setItem('theme', newTheme);
        });
    });
</script>